---
type: tutorial
title: Crea tu primera página Astro
i18nReady: true
description: |-
  Tutorial: Crea tu primer blog con Astro —
  Añade nuevas páginas a tu sitio con enlaces de navegación entre ellas
---
import Checklist from '~/components/Checklist.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Ahora que ya sabes que los archivos `.astro` son los responsables de las páginas de tu sitio web, ¡es hora de crear uno!

<PreCheck>
  - Crear dos nuevas páginas en tu sitio web: 'Acerca de' y Blog
  - Añadir enlaces de navegación a tus páginas
  - Desplegar en la web una versión actualizada de tu sitio web
</PreCheck>

## Crea un nuevo archivo `.astro`

<Steps>
1. En el panel de archivos de tu editor de código, ve a la carpeta `src/pages/` donde verás el archivo existente `index.astro`

2. En esa misma carpeta, crea un nuevo archivo llamado `about.astro`.

3. Copia o vuelve a escribir el contenido de `index.astro` en tu nuevo archivo `about.astro`.

    :::tip
    Tu editor puede mostrar un círculo blanco sólido en la etiqueta de este archivo. Esto significa que el archivo aún no se ha guardado. En el menú Archivo de VS Code, activa la opción "Guardar automáticamente" y ya no tendrás que guardar ningún archivo manualmente.
    :::

4. Añade `/about` al final de la URL de la vista previa de tu sitio web en la barra de direcciones y compruebe que puede ver una página cargada allí. (por ejemplo, `http://localhost:4321/about`)
</Steps>

Ahora mismo, tu página 'Acerca de' debería tener exactamente el mismo aspecto que la primera página, pero vamos a cambiarlo.

## Edita tu página

Edita el contenido HTML para que esta página sea sobre ti.

Para cambiar o añadir más contenido a tu página 'Acerca de', añade más etiquetas de elementos HTML que contengan contenido. Puedes copiar y pegar el código HTML siguiente entre las etiquetas `<body></body>` existentes, o crear las tuyas.

```astro title="src/pages/about.astro" ins={3-8} del={2}
<body>
  <h1>Mi sitio Astro</h1>
  <h1>Sobre mi</h1>
  <h2>... ¡y mi nuevo sitio Astro!</h2>

  <p>Estoy trabajando en el tutorial introductorio de Astro. Esta es la segunda página de mi sitio web, ¡y es la primera que he construido yo mismo!</p>

  <p>Este sitio se irá actualizando a medida que vaya completando más partes del tutorial, ¡así que no dejes de visitarlo para ver cómo va mi viaje!</p>
</body>
```

Ahora, vuelve a visitar tu página `/about` en la pestaña de tu navegador, y deberías ver tu contenido actualizado.

## Añade enlaces de navegación

Para facilitar la previsualización de todas tus páginas, añade enlaces HTML de navegación de páginas antes de tu `<h1>` en la parte superior de tus dos páginas (`index.astro` y `about.astro`):

```astro title="src/pages/about.astro" ins={1-2}
<a href="/">Inicio</a>
<a href="/about/">Sobre mi</a>

<h1>Sobre mi</h1>
<h2>... ¡y mi nuevo sitio Astro!</h2>
```

Comprueba que puede hacer clic en estos enlaces para avanzar y retroceder entre las páginas de tu sitio.

:::note
A diferencia de muchos frameworks, Astro utiliza elementos HTML estándar `<a>` para navegar entre páginas (también llamados _routes_), con las tradicionales actualizaciones de página.
:::

<Box icon="puzzle-piece">
## Pruébalo tú mismo - Añadir una página de blog

Añade una tercera página `blog.astro` a tu sitio, siguiendo los [mismos pasos que arriba](#crea-un-nuevo-archivo-astro).

(No olvides añadir un tercer enlace de navegación a cada página).

<details>
<summary>Muéstrame los pasos.</summary>
<Steps>
1. Crea un nuevo archivo en `src/pages/blog.astro`.
2. Copia todo el contenido de `index.astro` y pégalo en `blog.astro`.
3. [Añade un tercer enlace de navegación](#añade-enlaces-de-navegación) en la parte superior de cada página:
</Steps>

```astro title="src/pages/index.astro" ins={4}
<body>
  <a href="/">Inicio</a>
  <a href="/about/">Sobre mi</a>
  <a href="/blog/">Blog</a>

  <h1>Mi sitio Astro</h1>
</body>
```
</details>
</Box>

Ahora deberías tener un sitio web con tres páginas enlazadas entre sí. Es hora de añadir algo de contenido a la página Blog.

Actualizar el contenido de la página en `blog.astro` con:
```astro astro title="src/pages/blog.astro" ins={7-8} del={6}
<body>
  <a href="/">Inicio</a>
  <a href="/about/">Sobre mi</a>
  <a href="/blog/">Blog</a>

  <h1>Mi sitio Astro</h1>
  <h1>Mi blog de Astro aprendizaje</h1>
  <p>Aquí es donde publicaré sobre mi viaje de aprendizaje Astro.</p>
</body>
```

Previsualiza todo tu sitio visitando las tres páginas en la vista previa de tu navegador y compruébalo:
- Cada página enlaza correctamente con las tres páginas
- Tus dos nuevas páginas tienen cada una su propio título descriptivo 
- Tus dos nuevas páginas tienen cada una su propio párrafo de texto

## Publica tus cambios en la web
Si has seguido nuestra configuración en la Unidad 1, puedes publicar tus cambios en tu sitio web en vivo a través de Netlify.

Cuando estés satisfecho con el aspecto de tu vista previa, has un **commit** de los cambios a tu repositorio online en GitHub. 

<Steps>
1. En VS Code, previsualiza los archivos que han cambiado desde tu último commit en GitHub. 

    - Ve a la pestaña **Control de origen** del menú de la izquierda. Debería aparecer un pequeño "3".

    - Deberías ver que `index.astro`, `about.astro` y `blog.astro` aparecen como archivos que han cambiado.

2. Introduce un mensaje de confirmación (por ejemplo, "Añadidas dos nuevas páginas: acerca de y blog") en el cuadro de texto y pulsa <kbd>Ctrl + Enter</kbd> (macOS: <kbd>Cmd ⌘ + Enter</kbd>) para confirmar el cambio en tu espacio de trabajo actual.

3. Haz clic en el botón para <kbd>Sincronizar cambios</kbd> con GitHub.

4. Después de esperar unos minutos, visita tu URL Netlify para verificar que tus cambios sean publicados en vivo.
</Steps>

:::tip[haz commits y deploys regularmente]
Sigue estos pasos cada vez que hagas una pausa en tu trabajo. Tus cambios se actualizarán en tu repositorio de GitHub. Si has desplegado a un sitio web Netlify, será reconstruido y republicado.
:::



<Box icon="check-list">
## Checklist

<Checklist>
- [ ] Puedo crear una nueva página para mi sitio web y enlazar a ella desde una página existente.
- [ ] Puedo enviar mis cambios a GitHub y actualizar mi sitio en Netlify.
</Checklist>
</Box>

### Recursos

- [Enrutamiento basado en archivos en Astro](/es/basics/astro-pages/#enrutamiento-basado-en-archivos)

- [Páginas de Astro HTML](/es/basics/astro-pages/#páginas-de-astro)